import { IComponent } from "./base/IComponent";
import { error } from "@tauri-apps/plugin-log";
import { Length } from "./units";
import { FlexAlign, IFlexAttributes } from "./common";


export class _Flex extends IComponent {
    public static id: number = 0;
    protected _element: HTMLDivElement;

    constructor(configuration?: IFlexAttributes) {
        super(`flex-${_Flex.id++}`);
        this._element = document.createElement("div");
        this._element.id = this._id;
        this._element.style.display = 'flex';
        this._element.style.flex = 'flex-grow';
        this._element.style.gap = this.handleStyleNumber(configuration?.space ?? 0);
        this._element.style.flexDirection = configuration?.direction ?? 'row';
        this._element.style.justifyContent = configuration?.justifyContent ?? 'start';
        this._element.style.position = 'absolute';
    }

    width(width: Length): this {
        this._element.style.width = this.handleStyleNumber(width);
        return super.width(width);
    }

    height(height: Length): this {
        this._element.style.height = this.handleStyleNumber(height);
        return super.height(height);
    }

    justifyContent(value: FlexAlign): this {
        this._element.style.justifyContent = value;
        return this;
    }

    id(id: string): this {
        this._element.id = id;
        return super.id(id);
    }

    build(parentId?: string): void {
        try {
            super._build(this._element, parentId);
        } catch (e) {
            error(`error building Flex ${e}`);
        }
    }
}

export function Flex(configuration?: IFlexAttributes) {
    return new _Flex(configuration);
}